<template>
<div>
  <bk-tab :active.sync="active" :type="currentType" style="margin-top: 20px;">
    <bk-tab-panel v-for="(panel, index) in panels" v-bind="panel" :key="index">
      <div v-if="panel['name']==='listCenter'">
        <bk-button :theme="'primary'" :title="'新增任务'" class="mr10" @click="visible.addList.isshow = true">新增任务</bk-button>
        <bk-button :theme="'primary'" :title="'导入任务模板'" class="mr10">导入任务模板</bk-button>

        <bk-table style="margin-top: 15px;"
            :data="list"
            :size="size"
            @row-mouse-enter="handleRowMouseEnter"
            @row-mouse-leave="handleRowMouseLeave"
            @page-change="handlePageChange"
            @page-limit-change="handlePageLimitChange">
            <bk-table-column label="任务名称" prop="list_title" width="100"></bk-table-column>
            <bk-table-column label="任务内容" prop="list_content"></bk-table-column>
            <bk-table-column label="任务状态" prop="list_status" width="100" :filters="statusFilters"
                             :filter-method="statusFilterMethod"
                             :filter-multiple="false">
              <template slot-scope="props">
                <bk-tag v-if="props.row.list_status === '已完成'" theme="success">已完成</bk-tag>
                <bk-tag v-else-if="props.row.list_status === '已拒绝'" theme="danger">已拒绝</bk-tag>
                <bk-tag v-else-if="props.row.list_status === '待完成'" theme="info">待完成</bk-tag>
              </template>
            </bk-table-column>
            <bk-table-column label="任务备注" prop="list_note" ></bk-table-column>
            <bk-table-column label="计划完成时间" prop="plan_completion_time" ></bk-table-column>
            <bk-table-column label="实际完成时间" prop="actual_completion_time" ></bk-table-column>
            <bk-table-column label="创建时间" prop="create_time" ></bk-table-column>
            <bk-table-column label="操作" width="250">
                <template slot-scope="props">
                    <bk-button v-if="props.row.list_status === '已完成'" class="mr10" theme="primary" text  @click="cancleListStatus(props.row)">取消完成</bk-button>
                    <bk-button v-else-if="props.row.list_status === '已拒绝'" class="mr10" theme="primary" text  @click="cancleListStatus(props.row)">取消拒绝</bk-button>
                    <div v-else-if="props.row.list_status === '待完成'">
                      <bk-button class="mr10" theme="primary" text  @click="completeList(props.row)">√&nbsp;完成</bk-button>
                      <bk-button class="mr10" theme="primary" text  @click="refuseList(props.row)">×&nbsp;拒绝</bk-button>
                      <bk-button class="mr10" theme="primary" text  @click="openListEditDialog(props.row)">修改</bk-button>
                      <bk-button class="mr10" theme="primary" text  @click="removeList(props.row)">删除</bk-button>
                    </div>
                </template>
            </bk-table-column>
        </bk-table>
      </div>
      <div v-else>
        <bk-button :theme="'primary'" :title="'新增模板'" class="mr10" @click="visible.addTemplate.isshow = true">新增模板</bk-button>
        <bk-input
            style=" width: 300px"
            :placeholder="'请输入模板名称'"
            :right-icon="'bk-icon icon-search'"
            v-model="searchInput"
            @right-icon-click="searchTemplate">
        </bk-input>
        <bk-button :theme="'primary'" :title="'重置'" class="mr10" @click='resetSearch' >重置</bk-button>

        <bk-table style="margin-top: 15px;"
            :data="template_list"
            :size="size"
            @row-mouse-enter="handleRowMouseEnter"
            @row-mouse-leave="handleRowMouseLeave"
            @page-change="handlePageChange"
            @page-limit-change="handlePageLimitChange">
            <bk-table-column label="模板名称" prop="template_title" width="100"></bk-table-column>
            <bk-table-column label="模板内容" prop="template_content"></bk-table-column>
            <bk-table-column label="模板备注" prop="template_note"></bk-table-column>
            <bk-table-column label="可见范围" prop="visible_range" width="150" :filters="rangeFilters"
                             :filter-method="rangeFilterMethod"
                             :filter-multiple="false">
              <template slot-scope="props">
                <bk-tag v-if="props.row.visible_range == 0" theme="success">仅自己可见</bk-tag>
                <bk-tag v-else-if="props.row.visible_range == 1" theme="info">所有人可见</bk-tag>
              </template>
            </bk-table-column>
            <bk-table-column label="更新时间" prop="template_update_time" ></bk-table-column>
            <bk-table-column label="创建时间" prop="template_create_time" ></bk-table-column>
            <bk-table-column label="创建人" prop="template_create_person" ></bk-table-column>
            <bk-table-column label="操作" width="250">
                <template slot-scope="props">
                  <bk-button class="mr10" theme="primary" text  @click="openTemplateEditDialog(props.row)">修改</bk-button>
                  <bk-button class="mr10" theme="primary" text  @click="removeTemplate(props.row)">删除</bk-button>
                </template>
            </bk-table-column>
        </bk-table>
      </div>
    </bk-tab-panel>
  </bk-tab>
  <!-- 新增任务dialoag  and  form -->
  <bk-dialog v-model="visible.addList.isshow"
                    theme="primary"
                    width="600"
                    @confirm="addListInfo"
                    :mask-close="false"
                    :title="'新建任务'">
    <div style="width: 500px;">
        <bk-form :label-width="200" :model="listFormData" ref="validateFormList">
            <bk-form-item label="任务名称" :required="true" :property="'list_title'">
                <bk-input v-model="listFormData.list_title" placeholder="请输入任务名称"></bk-input>
            </bk-form-item>
            <bk-form-item label="任务内容" :required="true" :property="'list_content'">
                <bk-input v-model="listFormData.list_content" placeholder="请输入任务内容"></bk-input>
            </bk-form-item>
            <bk-form-item label="任务备注" :required="true" :property="'list_note'">
                <bk-input v-model="listFormData.list_note" placeholder="请输入任务备注"></bk-input>
            </bk-form-item>
            <bk-form-item label="计划完成时间" width='300' :required="true" :property="'plan_completion_time'">
              <bk-date-picker width='300' v-model="listFormData.plan_completion_time" :time-picker-options="timePickerOptions" :placeholder="'请选择计划完成的日期时间'" :type="'datetime'"></bk-date-picker>
            </bk-form-item>
        </bk-form>
    </div>
  </bk-dialog>
  <!-- 新增模板 dialoag 和 form -->
  <bk-dialog v-model="visible.addTemplate.isshow"
                    theme="primary"
                    width="600"
                    @confirm="addTemplateInfo"
                    :mask-close="false"
                    :title="'新建模板'">
    <div style="width: 500px;">
        <bk-form :label-width="200" :model="templateFormData" ref="validateFormTemplate">
            <bk-form-item label="模板名称" :required="true" :property="'template_title'">
                <bk-input v-model="templateFormData.template_title" placeholder="请输入模板名称"></bk-input>
            </bk-form-item>
            <bk-form-item label="模板内容" :required="true" :property="'template_content'">
                <bk-input v-model="templateFormData.template_content" placeholder="请输入模板内容"></bk-input>
            </bk-form-item>
            <bk-form-item label="模板备注" :required="true" :property="'template_note'">
                <bk-input v-model="templateFormData.template_note" placeholder="请输入模板备注"></bk-input>
            </bk-form-item>
            <bk-form-item label="可见范围" :required="true" :property="'visible_range'">
              <bk-radio-group v-model="templateFormData.visible_range">
                  <bk-radio :disabled="edit" :value="'0'">仅自己可见</bk-radio>
                  <bk-radio :disabled="edit" :value="'1'" style="margin-left: 20px">所有人可见</bk-radio>
              </bk-radio-group>
            </bk-form-item>
        </bk-form>
    </div>
  </bk-dialog>
</div>

</template>

<script>
import {
  bkTab,
  bkTabPanel,
  bkButton,
  bkForm, bkFormItem, bkInput, bkDatePicker, bkSearchSelect
} from 'bk-magic-vue'

export default {
  components: {
    bkTab,
    bkTabPanel,
    bkButton,
    bkForm,
    bkFormItem,
    bkInput,
    bkDatePicker,
    bkSearchSelect
  },
  name: 'home',
  data () {
    return {
      demo1: {
        value: [{ name: 'hello world' }]
      },
      visible: {
        addList: {
          isshow: false
        },
        addTemplate: {
          isshow: false
        }
      },
      listFormData: {
        id: '',
        list_title: '',
        list_content: '',
        list_note: '',
        plan_completion_time: ''
      },
      templateFormData: {
        id: '',
        template_title: '',
        template_content: '',
        template_note: '',
        visible_range: ''
      },
      searchInput: '',
      rangeFilters: [{ text: '仅自己可见', value: 0 }, { text: '所有人可见', value: 1 }],
      statusFilters: [{ text: '已完成', value: '已完成' }, { text: '已拒绝', value: '已拒绝' }, { text: '待完成', value: '待完成' }],
      panels: [
        { name: 'listCenter', label: '任务中心', count: 10 },
        { name: 'listTemplates', label: '任务模板', count: 20 }
      ],
      currentType: 'card',
      list: [],
      template_list: []
    }
  },
  mounted () {
    this.getList()
    this.getTemplateList()
  },
  methods: {
    rangeFilterMethod (value, row, column) {
      const property = column.property
      return row[property] === value
    },
    statusFilterMethod (value, row, column) {
      const property = column.property
      return row[property] === value
    },
    async getList () {
      console.log('获取任务接口')
      this.$http.post('get_list/').then(res => {
        this.list = res.data.data
        console.log('list', this.list)
        this.list.forEach(e => {
          if (e.actual_completion_time !== null) {
            e.actual_completion_time = this.timeFormatSeconds(e.actual_completion_time)
          }
          console.log('e.actual_completion_time', e.actual_completion_time)
        })
      })
    },
    async getTemplateList () {
      console.log('获取模板接口')
      this.$http.post('get_template_list/').then(res => {
        this.template_list = res.data.data
        console.log('template_list', this.template_list)
      })
    },
    searchTemplate () {
      console.log('search:', this.searchInput)
      this.$http.get('get_template_list/', {params: {'search_template_name': this.searchInput}}).then(res => {
        console.log('res', res)
        this.template_list = res.data.data
        console.log('查询接口', this.template_list)
      })
    },
    resetSearch () {
      this.searchInput = ''
      this.getTemplateList()
    },
    removeTemplate (item) {
      // eslint-disable-next-line camelcase
      let template_id = `${item.id}`
      this.$http.get('delete_template_info/', {params: {'template_id': template_id}}).then(res => {
        if (res.data.code === 200) {
          this.$bkMessage({
            message: res.data.message,
            theme: 'success'
          })
        } else {
          this.$bkMessage({
            message: res.data.message,
            theme: 'console.error();'
          })
        }
      })
      this.getTemplateList()
    },
    removeList (item) {
      // eslint-disable-next-line camelcase
      let list_id = `${item.id}`
      this.$http.get('delete_list_info/', {params: {'list_id': list_id}}).then(res => {
        if (res.data.code === 200) {
          this.$bkMessage({
            message: res.data.message,
            theme: 'success'
          })
        } else {
          this.$bkMessage({
            message: res.data.message,
            theme: 'error'
          })
        }
      })
      this.getList()
    },
    completeList (item) {
      // eslint-disable-next-line camelcase
      let list_id = `${item.id}`
      this.$http.get('complete_list/', {params: {'list_id': list_id}}).then(res => {
        if (res.data.code === 200) {
          this.$bkMessage({
            message: res.data.message,
            theme: 'success'
          })
        } else {
          this.$bkMessage({
            message: res.data.message,
            theme: 'error'
          })
        }
      })
      this.getList()
    },
    refuseList (item) {
      // eslint-disable-next-line camelcase
      let list_id = `${item.id}`
      this.$http.get('refuse_list/', {params: {'list_id': list_id}}).then(res => {
        if (res.data.code === 200) {
          this.$bkMessage({
            message: res.data.message,
            theme: 'success'
          })
        } else {
          this.$bkMessage({
            message: res.data.message,
            theme: 'error'
          })
        }
      })
      this.getList()
    },
    cancleListStatus (item) {
      // eslint-disable-next-line camelcase
      let list_id = `${item.id}`
      this.$http.get('cancle_list_status/', {params: {'list_id': list_id}}).then(res => {
        if (res.data.code === 200) {
          this.$bkMessage({
            message: res.data.message,
            theme: 'success'
          })
        } else {
          this.$bkMessage({
            message: res.data.message,
            theme: 'error'
          })
        }
      })
      this.getList()
    },
    msToDate (msec) {
      let datetime = new Date(msec)
      let year = datetime.getFullYear()
      let month = datetime.getMonth()
      let date = datetime.getDate()
      let hour = datetime.getHours()
      let minute = datetime.getMinutes()
      let second = datetime.getSeconds()

      let result1 = year +
                 '-' +
                 ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
                 '-' +
                 ((date + 1) < 10 ? '0' + date : date) +
                 ' ' +
                 ((hour + 1) < 10 ? '0' + hour : hour) +
                 ':' +
                 ((minute + 1) < 10 ? '0' + minute : minute) +
                 ':' +
                 ((second + 1) < 10 ? '0' + second : second)

      let result2 = year +
                 '-' +
                 ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
                 '-' +
                 ((date + 1) < 10 ? '0' + date : date)

      let result = {
        hasTime: result1,
        withoutTime: result2
      }
      return result
    },
    timeFormatSeconds (time) {
      var d = time ? new Date(time) : new Date()
      var year = d.getFullYear()
      var month = d.getMonth() + 1
      var day = d.getDate()
      var hours = d.getHours()
      var min = d.getMinutes()
      var seconds = d.getSeconds()

      if (month < 10) month = '0' + month
      if (day < 10) day = '0' + day
      if (hours < 0) hours = '0' + hours
      if (min < 10) min = '0' + min
      if (seconds < 10) seconds = '0' + seconds

      return (year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + seconds)
    },
    timeReverse () {
      console.log('时间转化前', this.listFormData.plan_completion_time)
      this.listFormData.plan_completion_time = this.msToDate(this.listFormData.plan_completion_time).hasTime
      console.log('时间转化后', this.listFormData.plan_completion_time)
    },
    addListInfo () {
      if (this.visible.addList) {
        if (this.listFormData.list_title === '' || this.listFormData.list_content === '' || this.listFormData.list_note === '' || this.listFormData.plan_completion_time === '') {
          this.$bkMessage({
            message: '请补全内容',
            delay: 1000,
            theme: 'error',
            affsetY: 60,
            ellipsisLine: 2
          })
        } else {
          this.timeReverse()
          this.$http.get('/save_list_info/', {params: this.listFormData}).then(res => {
            if (res.data.code === 200) {
              this.$bkMessage({
                message: res.data.message,
                delay: 1000,
                theme: 'success',
                offsetY: 60,
                ellipsisLine: 2
              })
              this.getList()
            } else {
              this.$bkMessage({
                message: res.data.message,
                delay: 1000,
                theme: 'error',
                affsetY: 60,
                ellipsisLine: 2
              })
            }
          })
        }
      }
    },
    openListEditDialog (row) {
      console.log('打开列表信息编辑对话框')
      this.visible.addList.isshow = true
      this.listFormData.id = row.id
      this.listFormData.list_title = row.list_title
      this.listFormData.list_content = row.list_content
      this.listFormData.list_note = row.list_note
      this.listFormData.plan_completion_time = row.plan_completion_time
    },
    addTemplateInfo () {
      if (this.visible.addTemplate) {
        console.log('templateFormData', this.templateFormData)
        if (this.templateFormData.template_title === '' || this.templateFormData.template_content === '' || this.templateFormData.template_note === '' || this.templateFormData.visible_range === '') {
          this.$bkMessage({
            message: '请补全内容',
            delay: 1000,
            theme: 'error',
            affsetY: 60,
            ellipsisLine: 2
          })
        } else {
          this.$http.get('/save_template_info/', {params: this.templateFormData}).then(res => {
            if (res.data.code === 200) {
              this.$bkMessage({
                message: res.data.message,
                delay: 1000,
                theme: 'success',
                offsetY: 60,
                ellipsisLine: 2
              })
              this.getTemplateList()
            } else {
              this.$bkMessage({
                message: res.data.message,
                delay: 1000,
                theme: 'error',
                affsetY: 60,
                ellipsisLine: 2
              })
            }
          })
        }
      }
    },
    openTemplateEditDialog (row) {
      console.log('打开模板信息编辑对话框')
      this.visible.addTemplate.isshow = true
      this.templateFormData.id = row.id
      this.templateFormData.template_title = row.template_title
      this.templateFormData.template_content = row.template_content
      this.templateFormData.template_note = row.template_note
      this.templateFormData.visible_range = row.visible_range
    }
  }
}
</script>

<style scoped>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
